<template>
    <div class="admin-layout">
        <AdminSidebar />
        <div class="main-content">
            <!-- Admin Header -->
            <AdminHeader @logout="handleLogout" />
            <!-- Statistics Cards -->
            <div class="statistics-cards">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-card shadow="hover" class="stat-card">
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <el-icon><Bell /></el-icon>
                                </div>
                                <div class="stat-info">
                                    <div class="stat-value">{{ statistics.announcements }}</div>
                                    <div class="stat-label">公告数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="stat-card">
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <el-icon><Picture /></el-icon>
                                </div>
                                <div class="stat-info">
                                    <div class="stat-value">{{ statistics.carousels }}</div>
                                    <div class="stat-label">轮播图数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" class="stat-card">
                            <div class="stat-content">
                                <div class="stat-icon">
                                    <el-icon><VideoCamera /></el-icon>
                                </div>
                                <div class="stat-info">
                                    <div class="stat-value">{{ statistics.media }}</div>
                                    <div class="stat-label">媒体数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            
            <!-- 图表区域 -->
            <div class="charts-section">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="12">
                        <el-card class="chart-card">
                            <div ref="userTrendChart" class="chart"></div>
                        </el-card>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12">
                        <el-card class="chart-card">
                            <div ref="activityPieChart" class="chart"></div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 20px;">
                    <el-col :span="24">
                        <el-card class="chart-card">
                            <div ref="monthlyStatsChart" class="chart"></div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import AdminSidebar from '@/components/AdminSidebar.vue'
import { Bell, Picture, VideoCamera, Location, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import AdminHeader from '@/components/AdminHeader.vue'
const router = useRouter()
const userTrendChart = ref(null)
const activityPieChart = ref(null) 
const monthlyStatsChart = ref(null)

const statistics = ref({
    announcements: 24,
    carousels: 5,
    media: 0
})

const handleLogout = () => {
    localStorage.clear()
    localStorage.removeItem('loginTable')
    router.push('/login')
}

onMounted(() => {
    // 初始化图表
    const userChart = echarts.init(userTrendChart.value)
    const pieChart = echarts.init(activityPieChart.value)
    const monthlyChart = echarts.init(monthlyStatsChart.value)

    // 配置用户趋势图表
    userChart.setOption({
        title: { text: '用户增长趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
        yAxis: { type: 'value' },
        series: [{
            data: [150, 230, 224, 218, 135, 147],
            type: 'line'
        }]
    })

    // 配置活动类型饼图
    pieChart.setOption({
        title: { text: '活动类型分布' },
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie',
            radius: '60%',
            data: [
                {value: 40, name: '社区服务'},
                {value: 20, name: '文化艺术'},
                {value: 15, name: '环境保护'},
                {value: 25, name: '其他'}
            ]
        }]
    })

    // 配置月度统计图表
    monthlyChart.setOption({
        title: { text: '月度活动统计' },
        tooltip: { trigger: 'axis' },
        legend: {
            data: ['活动数量', '参与人数']
        },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: [
            {
                type: 'value',
                name: '活动数量',
                min: 0,
                max: 100,
                interval: 20
            },
            {
                type: 'value',
                name: '参与人数',
                min: 0,
                max: 1000,
                interval: 200
            }
        ],
        series: [
            {
                name: '活动数量',
                type: 'bar',
                data: [20, 25, 30, 35, 40, 45]
            },
            {
                name: '参与人数',
                type: 'line',
                yAxisIndex: 1,
                data: [200, 300, 400, 500, 600, 700]
            }
        ]
    })
})
</script>

<style scoped>
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.main-content {
    margin-left: 260px;
    padding: 20px;
    width: calc(100% - 260px);
}

.header {
    background: #fff;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.breadcrumb {
    display: flex;
    align-items: center;
}

.breadcrumb-icon {
    margin-right: 8px;
    color: #409EFF;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.statistics-cards {
    margin-bottom: 24px;
}

.stat-card {
    height: 120px;
}

.stat-content {
    display: flex;
    align-items: center;
    height: 100%;
}

.stat-icon {
    font-size: 48px;
    color: #409EFF;
    margin-right: 20px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 14px;
    color: #909399;
}

.chart-card {
    margin-bottom: 20px;
}

.chart {
    height: 400px;
}
</style>
